<template>
	<view class="input_box" id="box">
		<input class="input" placeholder="搜索">
	</view>
	<view class="scroll_box">
		<scroll-view class="scroll_left" :scroll-top=flag scroll-y scroll-with-animation>
			<view v-for="(item,index) in cateList" :key="index" @click="changeCount(index)"
				:class="['left_item',index==count?'active':'']">
				{{item.Name}}
			</view>
		</scroll-view>
		<scroll-view class="scroll_right" scroll-y>
			<view class="right_item" v-for="(item,index) in allList" :key="index">
				<view class="right_title">
					<view class="title">{{item.cateName}}</view>
					<view class="more">查看更多</view>
				</view>
				<view class="cateDetail_box">
					<view class="cateDetail" v-for="(item1,index1) in item.list" :key="index1">
						<image class="imgs" :src="item1.imgSrc" mode=""></image>
						<view class="goodsNmae">
							{{item1.goodsNmae}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script setup>
	import {
		cateList
	} from '../../untils/cate' 			//分类数据
	import {
		ref
	} from 'vue'
	console.log(cateList)
	let count = ref(0) 					//左侧选中下标
	let flag = ref(0)					//左侧滚动距离
	let allList = cateList[0].list
	let changeCount = (index) => { 		//点击切换
		count.value = index
		allList = cateList[index].list
		console.log(allList)
		flag.value = index*50
	}



	uni.createSelectorQuery().select('#box').boundingClientRect(data => {
		console.log(data)
	}).exec()
</script>

<style lang="scss">
	.input_box {
		height: 80rpx;
		padding: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;

		// background-color:white;
		.input {
			background-color: #F5F5F5;
			width: 70%;
			height: 60rpx;
			border-radius: 40rpx;
			box-sizing: border-box;
			padding-left: 40rpx;
			font-size: 14px
		}
	}

	.scroll_box {
		margin-top: 60px;
		display: flex;
		height: 990rpx;
		overflow: hidden;

		.scroll_left {
			background-color: red;
			width: 25%;
			height: 100%;
			background-color: #F5F5F5;

			.left_item {
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}

		.scroll_right {
			// background-color: aqua;
			flex: 1;
			height: 100%;
			padding: 0 20rpx;

			.right_item {
				.right_title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 18px;
						font-weight: 800;
					}

					.more {
						font-size: 14px
					}
				}

				.cateDetail_box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin: 20rpx 0;

					&::after {
						content: '';
						width: 150rpx;
					}

					.cateDetail {

						width: 150rpx;

						.imgs {
							width: 150rpx;
							height: 150rpx;
						}

						.goodsNmae {
							font-size: 14px;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.active {
		background-color: white;
	}
</style>
